/**
 * 微应用主题管理工具
 * 解决主题切换时微应用DOM销毁重建导致的显示问题
 * 行业标准解决方案：主题状态持久化 + 微应用生命周期管理
 */

import { getCurrentMicroApp } from '../micro';

// 主题状态存储
interface ThemeState {
  isDark: boolean;
  themeName: string;
  timestamp: number;
}

// 微应用主题配置
interface MicroAppThemeConfig {
  appName: string;
  themeClassName: string;
  cssVariables: Record<string, string>;
}

// 主题状态管理器
class MicroAppThemeManager {
  private static instance: MicroAppThemeManager;
  private themeState: ThemeState | null = null;
  private themeConfigs: Map<string, MicroAppThemeConfig> = new Map();
  
  private constructor() {
    this.loadThemeState();
    this.setupThemeSync();
  }

  static getInstance(): MicroAppThemeManager {
    if (!MicroAppThemeManager.instance) {
      MicroAppThemeManager.instance = new MicroAppThemeManager();
    }
    return MicroAppThemeManager.instance;
  }

  // 加载主题状态
  private loadThemeState(): void {
    try {
      const stored = localStorage.getItem('micro-app-theme-state');
      if (stored) {
        this.themeState = JSON.parse(stored);
        console.log('MicroAppThemeManager: 加载主题状态', this.themeState);
      }
    } catch (error) {
      console.warn('MicroAppThemeManager: 加载主题状态失败', error);
    }
  }

  // 保存主题状态
  private saveThemeState(): void {
    try {
      if (this.themeState) {
        localStorage.setItem('micro-app-theme-state', JSON.stringify(this.themeState));
      }
    } catch (error) {
      console.warn('MicroAppThemeManager: 保存主题状态失败', error);
    }
  }

  // 设置主题同步机制
  private setupThemeSync(): void {
    // 监听主题变化事件
    window.addEventListener('theme-changed', (event: any) => {
      console.log('MicroAppThemeManager: 接收到主题变化事件', event.detail);
      this.handleThemeChange(event.detail);
    });

    // 监听微应用挂载事件
    window.addEventListener('micro-app-mounted', (event: any) => {
      console.log('MicroAppThemeManager: 接收到微应用挂载事件', event.detail);
      this.syncThemeToMicroApp(event.detail.appName);
    });
    
    // 监听微应用重新挂载事件
    window.addEventListener('micro-app-remount', (event: any) => {
      console.log('MicroAppThemeManager: 接收到微应用重新挂载事件', event.detail);
      // 重新同步主题到微应用
      if (event.detail && event.detail.appName) {
        console.log('MicroAppThemeManager: 重新同步主题到微应用', event.detail.appName);
        this.syncThemeToMicroApp(event.detail.appName);
      }
    });
  }

  // 处理主题变化
  private handleThemeChange(themeInfo: { isDark: boolean; themeName: string }): void {
    this.themeState = {
      ...themeInfo,
      timestamp: Date.now()
    };
    this.saveThemeState();

    // 同步主题到当前微应用
    const currentPath = window.location.pathname;
    const currentApp = getCurrentMicroApp(currentPath);
    
    if (currentApp) {
      console.log('MicroAppThemeManager: 同步主题到微应用', currentApp);
      this.syncThemeToMicroApp(currentApp);
    }
  }

  // 同步主题到微应用
  public syncThemeToMicroApp(appName: string): void {
    if (!this.themeState) {
      console.log('MicroAppThemeManager: 没有主题状态需要同步');
      return;
    }

    const config = this.themeConfigs.get(appName);
    if (!config) {
      console.warn(`MicroAppThemeManager: 未找到微应用 ${appName} 的主题配置`);
      return;
    }

    console.log(`MicroAppThemeManager: 同步主题到 ${appName}`, this.themeState);

    // 使用消息机制通知微应用主题变化
    this.notifyMicroAppThemeChange(appName, config);
  }

  // 通知微应用主题变化
  private notifyMicroAppThemeChange(appName: string, config: MicroAppThemeConfig): void {
    // 延迟执行，确保微应用DOM已渲染
    setTimeout(() => {
      const microAppWindow = this.getMicroAppWindow(appName);
      if (microAppWindow) {
        // 方法1: 直接调用微应用的主题切换函数
        if (typeof microAppWindow.switchTheme === 'function') {
          microAppWindow.switchTheme(this.themeState);
          console.log(`MicroAppThemeManager: ✅ 调用 ${appName} 的 switchTheme 函数`);
        }

        // 方法2: 发送消息事件
        microAppWindow.postMessage({
          type: 'THEME_CHANGE',
          payload: this.themeState
        }, '*');

        // 方法3: 直接修改DOM（降级方案）
        this.applyThemeToMicroAppDOM(appName, config);
      } else {
        console.warn(`MicroAppThemeManager: 无法获取微应用 ${appName} 的 window 对象`);
      }
    }, 300);
  }

  // 获取微应用的window对象
  private getMicroAppWindow(appName: string): Window | null {
    try {
      // 查找微应用的iframe或shadow DOM
      const microAppElement = document.querySelector(`[data-qiankun="${appName}"]`);
      if (microAppElement) {
        // 如果是iframe
        const iframe = microAppElement.querySelector('iframe');
        if (iframe && iframe.contentWindow) {
          return iframe.contentWindow;
        }

        // 如果是shadow DOM，尝试获取内部的window
        const shadowRoot = microAppElement.shadowRoot;
        if (shadowRoot) {
          // 这里需要微应用配合暴露window对象
          return (shadowRoot as any).defaultView || window;
        }
      }

      // 降级方案：返回主窗口
      return window;
    } catch (error) {
      console.error(`MicroAppThemeManager: 获取微应用 ${appName} 的 window 对象失败`, error);
      return null;
    }
  }

  // 直接应用主题到微应用DOM
  private applyThemeToMicroAppDOM(appName: string, config: MicroAppThemeConfig): void {
    try {
      const microAppElement = document.querySelector(`[data-qiankun="${appName}"]`);
      if (!microAppElement) {
        console.warn(`MicroAppThemeManager: 未找到微应用 ${appName} 的DOM元素`);
        return;
      }

      // 应用CSS类名
      if (config.themeClassName) {
        microAppElement.classList.toggle(config.themeClassName, this.themeState!.isDark);
        console.log(`MicroAppThemeManager: 应用主题类名 ${config.themeClassName} 到 ${appName}`);
      }

      // 应用CSS变量
      if (config.cssVariables) {
        Object.entries(config.cssVariables).forEach(([key, value]) => {
          const actualValue = this.themeState!.isDark ? value : this.getLightValue(key);
          microAppElement.style.setProperty(key, actualValue);
        });
        console.log(`MicroAppThemeManager: 应用CSS变量到 ${appName}`);
      }
    } catch (error) {
      console.error(`MicroAppThemeManager: 应用主题到微应用 ${appName} DOM失败`, error);
    }
  }

  // 获取亮色模式的值
  private getLightValue(cssVar: string): string {
    // 这里应该根据CSS变量名返回对应的亮色值
    const lightValues: Record<string, string> = {
      '--bg-color': '#ffffff',
      '--text-color': '#333333',
      '--border-color': '#e4e7ed',
      // ... 其他变量
    };
    return lightValues[cssVar] || '';
  }

  // 注册微应用主题配置
  public registerMicroAppTheme(appName: string, config: MicroAppThemeConfig): void {
    this.themeConfigs.set(appName, config);
    console.log(`MicroAppThemeManager: 注册微应用 ${appName} 的主题配置`, config);
  }

  // 获取当前主题状态
  public getCurrentTheme(): ThemeState | null {
    return this.themeState;
  }

  // 手动触发主题同步
  public manualSyncTheme(): void {
    const currentPath = window.location.pathname;
    const currentApp = getCurrentMicroApp(currentPath);
    
    if (currentApp && this.themeState) {
      console.log('MicroAppThemeManager: 手动同步主题', currentApp);
      this.syncThemeToMicroApp(currentApp);
    }
  }
}

// 创建全局实例
export const microAppThemeManager = MicroAppThemeManager.getInstance();

// 便捷函数
export const syncMicroAppTheme = (): void => {
  microAppThemeManager.manualSyncTheme();
};

export const registerMicroAppTheme = (appName: string, config: MicroAppThemeConfig): void => {
  microAppThemeManager.registerMicroAppTheme(appName, config);
};

export default microAppThemeManager;